<template>
 <div id="app">
     <div id="cover"></div>
     <Header></Header>
     <p>{{counter}}</p>
     <p>{{fullName}}</p>
     <!-- <p>textA: {{textB}}</p> -->

     <router-link to="/app">app</router-link>
     <router-link to="/login">login</router-link>
     <router-link to="/login/exact">login exact</router-link>
     <transition name="fade">
      <router-view></router-view>
     </transition>
     <Footer></Footer>

 </div>
</template>

<script>
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
import {
  mapState,
  mapGetters,
  mapActions,
  mapMutations
} from 'vuex'

export default {
  components: {
    Header,
    Footer
    // Todo
  },
  methods: {
    ...mapActions(['updateCountAsync']),
    ...mapMutations(['updateCount'])
  },
  mounted () {
    console.log('store', this.$store, this.textPlus)

    // let i = 1
    // setInterval(() => {
    //   this.$store.commit('updateCount', i++)
    // }, 1000)
    // this.$store.dispatch('updateCountAsync', {
    //   num: 5,
    //   time: 2000
    // })
    this.updateCountAsync({
      num: 5,
      time: 2000
    })

    // this['a/updateText']('text2')

    // this['a/add']()
    // this.testAction()
  },
  computed: {
    // textA () {
    //   return this.$store.state.a.text
    // },
    // textB () {
    //   return this.$store.state.b.text
    // },
    // ...mapState(['count']),
    // ...mapState({
    //   counter: 'count'
    // }),
    ...mapState({
      counter: (state) => state.count
      // textA: (state) => state.a.text,
      // textC: (state) => state.c.text
    }),
    // count () {
    //   return this.$store.state.count
    // },
    ...mapGetters({
      fullName: 'fullName'
      // textPlus: 'a/textPlus'
    })
    // fullName () {
    //   return this.$store.getters.fullName
    // }
  }
}
</script>

<style lang="stylus" scoped>
#app{
  position absolute
  left 0
  right 0
  top 0
  bottom 0
}
#cover{
  position absolute
  left 0
  top 0
  right 0
  bottom 0
  background-color #999
  opacity .9
  z-index -1
}
</style>
